<template>
  <el-card shadow="never">
    <div class="title">
      <span>{{ title }}</span>
      <span>
        <font-awesome-icon icon="fa-solid fa-circle-info"/>
      </span>
    </div>
    <div class="content">
      <span v-if="isMoney" style="font-size: 30px;color: rgba(0,0,0,0.85);">
        <font-awesome-icon icon="fa-solid fa-yen-sign"/>
      </span>
      <span style="font-size: 30px;color: rgba(0,0,0,0.85);margin-left:4px">{{ count | moneyFilter }}</span>
      <span style="font-size:14px;color: rgba(0,0,0,0.85);margin-left:10px">{{ unit }}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'CountCard',
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      required: true
    },
    isMoney: {
      type: Boolean,
      required: true
    },
    unit: {
      type: String,
      required: true
    }
  },
}
</script>

<style lang="scss" scoped>
.el-card {
  .title {
    display: flex;
    justify-content: space-between;

    span {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
  }

  .content {
    margin-top: 15px;
    line-height: 38px;
  }
}
</style>
